uniapp 动态设置 tabBar 的整体样式

您所在的位置:网站首页 uniapp tabbar 自定义样式 uniapp 动态设置 tabBar 的整体样式

uniapp 动态设置 tabBar 的整体样式

2024-07-16 09:26| 来源: 网络整理| 查看: 265

uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√x√

OBJECT参数说明:

属性类型默认值必填说明indexnumber 是tabBar 的哪一项,从左边算起textString 否tab 上的按钮文字iconPathString 否图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片selectedIconPathString 否选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效successFuntion 否接口调用成功的回调函数failFuntion 否接口调用失败的回调函数completeFuntion 否接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

uni.setTabBarItem({ index: 0, text: 'text', iconPath: '/path/to/iconPath', selectedIconPath: '/path/to/selectedIconPath' }) uni.setTabBarStyle(OBJECT)

动态设置 tabBar 的整体样式

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√x√

OBJECT参数说明:

属性类型默认值必填说明colorString 是tab 上的文字默认颜色,HexColorselectedColorString 是tab 上的文字选中时的颜色,HexColorbackgroundColorString 是tab 的背景色,HexColorborderStyleString 是tabBar上边框的颜色, 仅支持 black/whitesuccessFuntion 否接口调用成功的回调函数failFuntion 否接口调用失败的回调函数completeFuntion 否接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

uni.setTabBarStyle({ color: '#FF0000', selectedColor: '#00FF00', backgroundColor: '#0000FF', borderStyle: 'white' }) uni.hideTabBar(OBJECT)

隐藏 tabBar

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√x√

OBJECT参数说明:

属性类型默认值必填说明animationbooleanfalse否是否需要动画效果,仅微信小程序和百度小程序支持successFuntion 否接口调用成功的回调函数failFuntion 否接口调用失败的回调函数completeFuntion 否接口调用结束的回调函数(调用成功、失败都会执行) uni.showTabBar(OBJECT)

显示 tabBar

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√x√

OBJECT参数说明:

属性类型默认值必填说明animationbooleanfalse否是否需要动画效果,仅微信小程序和百度小程序支持successFuntion 否接口调用成功的回调函数failFuntion 否接口调用失败的回调函数completeFuntion 否接口调用结束的回调函数(调用成功、失败都会执行) uni.setTabBarBadge(OBJECT)

为 tabBar 某一项的右上角添加文本。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√x√

OBJECT参数说明:

参数类型必填说明indexNumber是tabBar的哪一项,从左边算起textString是显示的文本,不超过 3 个半角字符successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

uni.setTabBarBadge({ index: 0, text: '1' }) uni.removeTabBarBadge(OBJECT)

移除 tabBar 某一项右上角的文本。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√x√

OBJECT参数说明:

参数类型必填说明indexNumber是tabBar的哪一项,从左边算起successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行) uni.showTabBarRedDot(OBJECT)

显示 tabBar 某一项的右上角的红点。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√x√

OBJECT参数说明:

参数类型必填说明indexNumber是tabBar的哪一项,从左边算起successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行) uni.hideTabBarRedDot(OBJECT)

隐藏 tabBar 某一项的右上角的红点。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√x√

OBJECT参数说明:

参数类型必填说明indexNumber是tabBar的哪一项,从左边算起successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行) uni.onTabBarMidButtonTap(CALLBACK)

监听中间按钮的点击事件

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√(HBuilderX 2.3.4+)xxxxxx


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3